<template>
  <div class="datagrid-container">
    <el-table ref="dataGrid" :data="list">
      <el-table-column label="序号" width="60px" align="center" v-if="type === 'index'" type="index" :index="rowIndex"></el-table-column>
      <el-table-column v-else-if="type === 'multiple'" type="selection"></el-table-column>
      <slot></slot>
    </el-table>
    <el-pagination
      :style="{visibility: totalCount > 0 ? 'visible': 'hidden'}"
      v-if="paging"
      background
      layout="prev, pager, next"
      @current-change="pageChange"
      :total="totalCount" />
  </div>
</template>

<script>/**
 Author: 蒋鑫强
 Time: 2023/6/2
 Description:
 */
import http, {HTTP_METHOD} from '@/util/http';
import dialog from '@/util/dialog';

export default {
  name: 'DataGrid',

  props: {
    //本地数据
    data: {
      type: Array,
      default: () => []
    },

    //接口数据
    url: {
      type: String,
      default: ''
    },

    param: {
      type: Object,
      default: () => ({})
    },

    transformData: {
      type: Function,
      default: res => res
    },

    transformTotalCount: {
      type: Function,
      default: () => 0
    },

    paging: {
      type: Boolean,
      default: false
    },

    pagingConfig: {
      type: Function,
      default: page => page
    },

    //index, multiple
    type: {
      type: String,
      default: 'index'
    }
  },

  data(props) {
    const pagingParam = {
      pageIndex: 1,
      pageSize: 20
    };

    return {
      list: [...props.data],
      cachePagingParam: pagingParam,
      pagingParam: props.pagingConfig(pagingParam),
      totalCount: 0
    };
  },

  watch: {
    data: {
      deep: true,
      handler() {
        this.list = [...this.data];
      }
    }
  },

  methods: {
    async loadRemoteData(scrollFixed) {
      const arr = this.url.split('#');
      let method = '';
      let url = '';
      if (arr.length === 1) {
        method = HTTP_METHOD.GET;
        url = arr[0];
      } else {
        method = arr[0];
        url = arr[1];
      }

      let param = {
        ...this.param
      };

      if (this.paging) {
        param = {
          ...this.param,
          ...this.pagingParam
        };
      }

      const result = method === HTTP_METHOD.GET ? await http.get(url, param) : await http.post(url, param);

      this.list = this.transformData(result);

      this.totalCount = this.transformTotalCount(result);

      if (!scrollFixed) {
        this.$refs.dataGrid.scrollTo({
          left: 0,
          top: 0
        });
      }
    },

    pageChange(page, scrollFixed) {
      this.cachePagingParam.pageIndex = page;
      this.pagingParam = this.pagingConfig(this.cachePagingParam);
      this.loadRemoteData(scrollFixed);
    },

    rowIndex(index) {
      return (this.pagingParam.pageIndex - 1) * this.cachePagingParam.pageSize + index + 1;
    },

    getSelectionRows() {
      return this.$refs.dataGrid.getSelectionRows();
    },

    removeData(list, key = 'id') {
      if (list.length <= 0) {
        dialog.alert('没有需要删除的数据');
      } else {
        dialog.confirm('确定要删除数据?').then(() => {
          if (this.url) {
            this.pageChange(1, true);
          } else {
            const ids = list.map(d => d[key]);
            this.list = this.list.filter(d => !ids.includes(d[key]));
          }
        });
      }
    }
  },

  created() {
    if (this.url) {
      this.list = [];
      this.loadRemoteData();
    }
  }
}
</script>

<style lang="less" scoped>
.datagrid-container {
  display: flex;
  flex-direction: column;

  :deep(.el-table) {
    flex: 1;
    overflow: hidden;
  }

  :deep(.el-pagination) {
    margin-top: 10px;
    justify-content: flex-end;
  }
}
</style>
